<template>
  <div class="login">
    <van-nav-bar
      title="登录"
      left-text="返回"
      left-arrow
      @click-left="router.back()"
    />

    <div class="login-form">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="formData.phone"
            name="phone"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[
              { required: true, message: '请填写手机号' },
              { pattern: phonePattern, message: '请输入正确的手机号' },
            ]"
          />

          <van-field
            v-model="formData.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>

        <div class="form-actions">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>

          <div class="action-links">
            <span @click="router.push('/register')">注册账号</span>
            <span @click="showForgetPassword">忘记密码</span>
          </div>
        </div>
      </van-form>

      <!-- 其他登录方式 -->
      <div class="other-login">
        <div class="title">
          <span class="line"></span>
          <span class="text">其他登录方式</span>
          <span class="line"></span>
        </div>
        <div class="icons">
          <van-icon
            name="wechat"
            color="#07c160"
            size="28"
            @click="thirdPartyLogin('wechat')"
          />
          <van-icon
            name="alipay"
            color="#1677ff"
            size="28"
            @click="thirdPartyLogin('alipay')"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showToast, showDialog } from "vant";
import { login } from "@/api/user";
import { useUserStore } from "@/stores/user";

const router = useRouter();
const userStore = useUserStore();

const formData = ref({
  phone: "",
  password: "",
});

const phonePattern = /^1[3-9]\d{9}$/;

const onSubmit = async (values) => {
  try {
    const data = await login({
      phone: values.phone,
      password: values.password,
    });

    userStore.setToken(data.token);
    await userStore.fetchUserInfo();

    showToast({
      type: "success",
      message: "登录成功",
      onClose: () => {
        router.replace("/");
      },
    });
  } catch (error) {
    showToast(error.message || "登录失败，请重试（如密码大小写）");
  }
};

const showForgetPassword = () => {
  showDialog({
    title: "提示",
    message: "请联系客服重置密码",
    confirmButtonText: "确定",
  });
};

const thirdPartyLogin = (type) => {
  showToast(`暂不支持${type === "wechat" ? "微信" : "支付宝"}登录`);
};
</script>

<style scoped lang="scss">
.login {
  min-height: 100vh;
  background: #f7f8fa;

  .login-form {
    padding-top: 20px;
  }

  .form-actions {
    margin: 16px;

    .action-links {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      padding: 0 12px;
      color: #666;
      font-size: 14px;
    }
  }

  .other-login {
    margin-top: 48px;
    text-align: center;

    .title {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 16px;

      .line {
        flex: 1;
        height: 1px;
        background: #eee;
      }

      .text {
        padding: 0 16px;
        color: #999;
        font-size: 14px;
      }
    }

    .icons {
      margin-top: 16px;

      .van-icon {
        margin: 0 16px;
      }
    }
  }
}
</style> 